<!DOCTYPE html>

<!--学院业绩成果数-->

<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('表格虚拟滚动')" />
	<style>
		/* 总计行样式 */
		.total-row {
			background-color: #f8f9fa !important;
			font-weight: bold;
		}

		.total-row td {
			border-top: 2px solid #dee2e6 !important;
		}

		/* 总计行合并列的样式 */
		.total-merged-cell {
			position: relative;
			text-align: center !important;
			background-color: #e9ecef !important;
			font-weight: bold !important;
		}

		/* 隐藏总计行的多选框 */
		.total-row .bs-checkbox {
			visibility: hidden;
		}
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="btn-group-sm" id="toolbar" role="group">
<!--	        <a class="btn btn-success" onclick="loadRows()">-->
<!--	            <i class="fa fa-plus"></i> 加载10000行数据-->
<!--	        </a>-->
<!--	        <a class="btn btn-info" onclick="appendRows()">-->
<!--	            <i class="fa fa-edit"></i> 追加10000行数据-->
<!--	        </a>-->
	        &nbsp;&nbsp;<span id="total" class="badge badge-success"></span>
        </div>
        <div class="row">
			<div class="col-sm-12 select-table table-bordered">
				<table id="bootstrap-table"></table>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
    <script>
        var total = 0
		var prefix = ctx + 'rewardxueyuan'
        $(function() {
		    var options = {
				url: prefix + "/list",
				modalName: '学院业绩成果数',
				height: "100%",
				sidePagination: "server",
				pagination: true,
				showSearch: false,
				virtualScroll: true,
				columns:[
					[
					{
						checkbox: true
					},
					{
						field: 'parentName',
						title: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
						align: 'center'
					},
					{
						field: 'deptName',
						title: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;专业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
						align: 'center'
					},
					{
						title: '纵向科研项目-校级以上',
						align: 'center',
						field: '纵向科研项目-校级以上'
					},
					{
						title: '纵向科研项目-校级',
						align: 'center',
						field: '纵向科研项目-校级'
					},
					{
						title: '横向课题科研项目',
						align: 'center',
						field: '横向课题科研项目'
					},
					{
						title: '成果转化',
						align: 'center',
						field: '成果转化'
					},
					{
						title: '学术论文',
						align: 'center',
						field: '学术论文'
					},
					{
						title: '教材著作',
						align: 'center',
						field: '教材著作'
					},
					{
						title: '专利',
						align: 'center',
						field: '专利'
					},
					{
						title: '软著',
						align: 'center',
						field: '软著'
					},
					{
						title: '奖励',
						align: 'center',
						field: '奖励'
					},
					{
						title: '学术报告(讲座类)',
						align: 'center',
						field: '学术报告(讲座类)'
					}
					],

			]
		    };
		    $.table.init(options);

			// 添加表格加载完成后的回调函数
			$('#bootstrap-table').on('load-success.bs.table', function () {
				const $table = $(this);
				const $tbody = $table.find('tbody');

				// 使用延时确保DOM完全渲染
				setTimeout(function() {
					// 查找总计行（userName为"总计"的行）
					$tbody.find('tr').each(function() {
						const $row = $(this);
						const $cells = $row.find('td');

						// 检查第三列（教师列）是否为"总计"
						if ($cells.length > 2 && $cells.eq(2).text().trim() === '总计') {
							processTotalRow($row, $cells);
						}
					});
				}, 200);
			});

			// 处理总计行的函数
			function processTotalRow($row, $cells) {
				// 1. 为整行添加总计样式
				$row.addClass('total-row');

				// 2. 处理第二、三列的合并（教研室和教师列）
				const $deptCell = $cells.eq(1);    // 教研室列
				const $teacherCell = $cells.eq(2); // 教师列

				// 3. 设置合并后的样式和内容
				$deptCell.addClass('total-merged-cell')
						.attr('colspan', '2')
						.text('总计');

				// 4. 隐藏第三列
				$teacherCell.hide();

				// 5. 确保多选框被隐藏
				$cells.eq(0).addClass('bs-checkbox');
			}
		});

</script>

</body>
</html>